iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 6
1
自我挑戰組

網頁排版個人學習筆記系列 第 6

HTML&CSS|logo圖片取代文字技巧&選單中加入logo

  • 分享至 

  • xImage
  •  
  • 優良的語意化網頁結構才有辦法讓搜尋引擎 ( SEO ) 友善的收錄
  • 對網頁來說 H1 ~ H6 越前面權重越大。
  • 段內容都要視權重標示清楚正確的網頁標籤,優良的語意化網頁結構才有辦法讓搜尋引擎友善的收錄
  • 網頁中只會有一個權重最大的 H1 標籤。如果使用多個 H1 標籤,爬蟲在網頁中會無法辨識哪個才是最重要的資訊。

LOGO 圖片取代文字

為什麼要使用圖片取代文字的方式來寫LOGO?

因為 google 機器人無法搜尋到圖片,只會認文字內容,所以為了讓搜尋引擎能夠找到網站重要內容,建議用圖片取代文字的方法。

LOGO 圖片取代文字步驟 ( CODEPEN 範例連結 )

  • 設 H1 表示此 LOGO 為此網頁權重最重 。
  • H1 內設 a 連結 & 文字 ( 搜尋引擎在搜尋時可以搜尋到文字內容,也可保有連結 )。
<h1 class="logo">
	<a href="#">公司LOGO</a>
</h1>
  • logo 背景圖位置寫在 a 連結,才能點擊的到。
  • a 連結為行內元素,記得寫 display:block 變區塊元素logo圖才會正確顯示
display:block;
background:url('logo圖片路徑') no-repeat;

  • 加入下方 css 屬性, logo圖就會取代文字
text-indent:101%; /*首行縮排*/
overflow:hidden; /*自動隱藏超出的文字或圖片*/
white-space:nowrap; /*希望元素在第一排上面,沒有斷行*/


EX01. 選單中加入logo ( 圖片取代文字 ) 。 ( CODEPEN 範例連結 )

此範例使用 float

HTML&amp;CSS-選單中加入logo

  1. 以 h1 與 a 連結寫出一個logo
  2. ulli 做出選單
  3. 要讓 logo 與選單排成一列,需使用到 float
    1. logo 靠左 ,選單們先靠右在靠左
  4. 有使用到浮動的元素都需要進行清除浮動的動作 clearfix:after
  5. 再依喜好調整 logo 與選單的距離即可
  6. 文字很抽象, 請搭配範例服用XD

HTML 中使用 img 標籤 與使用背景圖 background-img 差異 ?

使用背景圖

<h1 class="logo"><a href="#">公司LOGO</a></h1>

  • 使用 background-img 背景圖可把文字與圖片寫在同一個標籤上,在一個結構即可完成,不用再多寫一個 img 標籤,較簡潔。另外因為搜尋引擎無法辨別圖片,可辨別文字所以使用圖片取代文字。
  • 用 H1 包覆,則是方便搜尋引擎爬取網頁時,瞭解這此為網頁中最重要的內容。
  • 綜合以上,所以使用 H1 標籤 " LOGO 圖片取代文字 " ,這些都有助於 SEO 優化。

在 HTML 使用 img 標籤

<a><img src="" alt=""></a>

  • img 標籤 ,會把替代文字寫在 alt 屬性內,除了圖片失效時會顯示,也有助於搜尋引擎的優化。

資料來源


上一篇
HTML&CSS| 選單使用float呈現方式
下一篇
HTML&CSS|版面使用float也清除浮動卻清不乾淨?
系列文
網頁排版個人學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言